<template>
    <input  class='search-input' v-model="keyword" type="text" placeholder="请输入驾驶人名" accept-charset="UTF-8">
    <button class="search-button" type="submit" @click="search"></button>
    <el-dialog v-model="dialogVisible" title="事故详情" width="60%" :append-to-body="true">
        <el-table :data="detailData" style="width: 100%" size="small" :max-height="400" @row-click="clickRow">
            <el-table-column :show-overflow-tooltip="true" prop="event_num" label="编号" /> 
            <el-table-column :show-overflow-tooltip="true" prop="addr" label="坐标" />
            <el-table-column prop="name" label="事故类型" />
            <el-table-column prop="area" label="事故区域" />
            <el-table-column prop="car_num" label="车牌号"  />
            <el-table-column prop="driver" label="事故人" />
            <el-table-column prop="level" label="事故等级"/>
            <el-table-column prop="describe" label="事故描述"/>
            <el-table-column prop="time" label="上报时间" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
    import {ref,computed} from 'vue'
    import axios from "axios"
    let keyword;
    const dialogVisible = ref(false)
    const tableData = ref([])
const detailData = ref([])

const search=()=>{
    console.log(keyword)
    axios.get('http://127.0.0.1/road/all',{
        params: {
            id:keyword
        }
      }).then(res=>{
    console.log(res.data);
        const addr=res.data[0].event_addr
        const car_num=res.data[0].event_carnum
        const describe=res.data[0].event_describe

        const event_num=res.data[0].event_id

        const level=res.data[0].event_level
        const area=res.data[0].event_mark
        const driver=res.data[0].event_name
        const time=res.data[0].event_time
        const name=res.data[0].event_type
        //console.log(a);
       //const { addr,car_num,describe,event_num,level,area,userid,driver,status,time,name  } = res.data[0]
       
          detailData.value = [
      {
          event_num,
          addr,
          name,
          area,
          car_num,
          driver,
          level,
          describe,
          time
      }
  ]
       dialogVisible.value = true
      }).catch(err=>{
          console.log("操作失败" + err);
      })

}

</script>
<style scoped>
.search-input {
    border: 2px solid #5e5c5c;
    border-radius: 5px;
    background: transparent;
 
    height: 40px;
    width: 240px;
  
    margin-left:50px;
    margin-top:20px
}

.search-button {
    background: #575656;
    border-radius: 0 5px 5px 0;
    width: 60px;
   height: 43px;
     
   
    margin-top:20px
}

.search-button:before {
    content: "搜索";
    font-size: 13px;
    color: #F9F0DA;
}
</style>